Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Emotion] Convert EuiPanel #5891

Merged
merged 16 commits into from
May 23, 2022
Merged

[Emotion] Convert EuiPanel #5891

merged 16 commits into from
May 23, 2022

Conversation

cchaos
Copy link
Contributor

@cchaos cchaos commented May 10, 2022 •
edited
Loading

Lots of snapshot updates

EuiPanel

  • Removed explicit borderRadius classnames
  • Moved panelPaddingValues to be declared in resizable_panel
  • By using the useEuiPaddingCSS utility, EuiPanel's now have two more options for padding xs and xl
  • Simplified old legacy vs Amsterdam logic between hasBorder and hasShadow
  • Moved Amsterdam specific euiPanel() mixin to be the global_styles/ version

Other fixes

  • [EuiSplitPanel] Fix border radius by just setting overflow: hidden
  • [EuiCallOut] Fixed description margin when only child (my bad)

Utility fixes

  • Fixed useEuiPaddingCSS and useEuiBackgroundColorCSS to render css blocks so consuming components render the key name in the class
  • Fixed default size value of euiShadow

Checklist

  • Checked in both light and dark modes
  • Checked in mobile
  • Checked in Chrome, Safari, Edge, and Firefox
  • Props have proper autodocs and playground toggles
  • [ ] Added documentation
  • [ ] Checked Code Sandbox works for any docs examples
  • Added or updated jest and cypress tests
  • [ ] Checked for breaking changes and labeled appropriately
  • [ ] Checked for accessibility including keyboard-only and screenreader modes
  • Updated the Figma library counterpart
  • A changelog entry exists and is marked appropriately

cchaos added 6 commits May 9, 2022 16:49
Move amsterdam panel overrides to global
d2dc7a7
[EuiPanel] Initial conversion complete
e65340c 
- Removed explicit `paddingSize` and `borderRadius` classnames.
- Fixed `useEuiPaddingCSS` and `useEuiBackgroundColorCSS` to render `css` blocks so consuming components render the key name in the class
- Fixed default size value of `euiShadow`
- Moved `panelPaddingValues` to be declared in resizable_panel
[EuiSplitPanel] Fix border radius by just setting overflow: hidden
24c213a
[EuiPanel] Put paddingSize class name modifiers back but only for p…
6233bc4 
…reviously supported sizes

- Fixes popovers and cards
Fix prop comment and default
583e491
Some fixes
e72d3f2 
- Fixe EuiCallOut description margin when only child
@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_5891/

cchaos
cchaos commented May 10, 2022
View reviewed changes
src/components/call_out/call_out.styles.ts Show resolved Hide resolved
src/components/panel/panel.style.ts Outdated Show resolved Hide resolved
src/components/panel/panel.style.ts Outdated
Comment on lines 32 to 37
radius: {
none: css``,
m: css`
border-radius: ${euiTheme.border.radius.medium};
`,
},
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

New pattern of nested styling based on prop values. This allowed me to write

styles.radius[borderRadius]

Since the key name would conflict with sizing or any other t-shirt type prop values without having to re-create a specific string. The only downside is that it sill only renders the final key like -m in the class name. So you could be situations where its -m-l not knowing which is for radius vs size.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Super cool pattern! takes notes

The downside doesn't overly bother me, people probably shouldn't be looking at our classNames for semantic meaning in any case 🤔

src/components/panel/panel.tsx Outdated
import { euiPanelStyles } from './panel.style';

export const SIZES = PADDING_SIZES;
export type PanelPaddingSize = EuiPaddingSize;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

EuiPanel now gets its possible padding size values and styles from a single utility. 🙌

Merge remote-tracking branch 'origin/main' into css-in-js/panel
64c178d 
# Conflicts:
#	src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap
#	src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap
#	src/components/form/super_select/__snapshots__/super_select.test.tsx.snap
#	src/components/popover/__snapshots__/popover.test.tsx.snap
#	src/components/tour/__snapshots__/tour_step.test.tsx.snap
@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_5891/

@cchaos cchaos mentioned this pull request May 10, 2022
Merged
3 tasks
@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_5891/

@cchaos cchaos mentioned this pull request May 12, 2022
Closed
49 tasks
@cchaos cchaos added this to the Elastic Stack 8.4 milestone May 16, 2022
@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_5891/

@cchaos
Copy link
Contributor Author

cchaos commented May 19, 2022

@cee-chen
Copy link
Member

Lol I assumed Greg had this - I'll grab this review tomorrow!

@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_5891/

cee-chen
cee-chen reviewed May 20, 2022
View reviewed changes
src/components/combo_box/__snapshots__/combo_box.test.tsx.snap
@@ -449,7 +449,7 @@ exports[`props options list is rendered 1`] = `
</div>
</div>
<div
class="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiComboBoxOptionsList euiPopover__panel euiPopover__panel-isAttached euiPopover__panel-noArrow euiPopover__panel-isOpen euiPopover__panel--bottom"
class="euiPanel euiPanel--plain euiComboBoxOptionsList euiPopover__panel euiPopover__panel-isAttached euiPopover__panel-noArrow euiPopover__panel-isOpen euiPopover__panel--bottom css-1pupmsc-euiPanel-grow-m-plain"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Marking all snapshots as viewed, 2022, colorized

woman rubberstamping a huge sheaf of paper very quickly

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

More snapshot updates coming with the removal of the padding class 🤣

@cee-chen
Copy link
Member

That's all my comments I think! The rest LGTM!

@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_5891/

cchaos added 2 commits May 23, 2022 10:26
Merge remote-tracking branch 'origin/main' into css-in-js/panel
c613f9e 
# Conflicts:
#	src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap
[Review Feedback]:
6cd38cc 
- Renamed `PanelPaddingSize` to `PanelPaddingSize_Deprecated` and added comment
- Removed padding class names
@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_5891/

@cchaos cchaos requested a review from cee-chen May 23, 2022 18:44
@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_5891/

cee-chen
cee-chen approved these changes May 23, 2022
View reviewed changes
Copy link
Member

@cee-chen cee-chen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉

@cchaos
Copy link
Contributor Author

cchaos commented May 23, 2022

Thank you @constancecchen !

@cchaos cchaos merged commit 8de2483 into elastic:main May 23, 2022
@cchaos cchaos deleted the css-in-js/panel branch May 23, 2022 22:01
@cchaos cchaos mentioned this pull request May 24, 2022
Merged
2 tasks
@thompsongl thompsongl mentioned this pull request Jun 8, 2022
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@thompsongl thompsongl thompsongl left review comments

@cee-chen cee-chen cee-chen approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
Elastic Stack 8.4
Development

Successfully merging this pull request may close these issues.
4 participants
@cchaos @kibanamachine @cee-chen @thompsongl